<script setup lang="ts">
import { ref } from "vue";
import FormPicker from "@/components/formPicker.vue";
import { validFlowKey } from "@/api/flow/def";
import { validNumber } from "@/utils/rules";
import { translate } from "@/plugins/i18n";
import type { Process } from "@/views/design/process/ProcessNodes";

const defFlow = defineModel<Process>("defFlow");

const formRef = ref();
const formPickerRef = ref(null);
const disabledFlowKey = computed(() => {
  if (defFlow.value.id) {
    return true;
  } else {
    return false;
  }
});

// 校验是否已存在
const validateFlowKey = (rule, value, callback) => {
  // 修改判断相同id
  validFlowKey({
    flowKey: value,
    id: defFlow.value.id,
    version: defFlow.value.version
  }).then(response => {
    const result = response.code;
    if (result !== 200) {
      callback(new Error("流程key已经存在"));
    } else {
      callback();
    }
  });
};

const handleOpenFormPicker = () => {
  formPickerRef.value.show();
};

const handleFormChange = rows => {
  defFlow.value.formId = rows[0].id;
  defFlow.value.formName = rows[0].formName;
};

const validate = () => {
  return new Promise((resolve, reject) => {
    const errs = [];
    formRef.value
      .validate()
      .then(() => {
        resolve([]);
      })
      .catch(err => {
        errs.push(Object.keys(err).map(v => err[v][0].message));
        reject(errs);
      });
  });
};

const rules = {
  flowName: [
    { required: true, message: "请设置流程名称", trigger: "blur" },
    { min: 2, max: 20, message: "流程名称长度在2~20", trigger: "blur" }
  ],
  flowKey: [
    { required: true, message: "请设置流程Key", trigger: "blur" },
    { min: 2, max: 20, message: "流程Key长度在2~20", trigger: "blur" },
    { validator: validateFlowKey, trigger: "blur" }
  ],
  groupId: [{ required: true, message: "分组名称不能为空", trigger: "blur" }],
  status: [{ required: true, message: "请选择流程状态", trigger: "blur" }],
  version: [{ required: true, message: "请设置版本号", trigger: "blur" }],
  sort: [
    { required: true, message: "排序值不能为空", trigger: "blur" },
    { validator: validNumber, message: "排序值只能是数字", trigger: "blur" }
  ]
};

defineExpose({
  validate
});
</script>

<template>
  <el-form
    ref="formRef"
    :rules="rules"
    :model="defFlow"
    label-position="left"
    label-width="90px"
  >
    <slot name="itemLoad" />
    <el-form-item prop="icon" label="设置图标">
      <IconEdit v-model="defFlow.icon" />
    </el-form-item>
    <el-form-item prop="flowName" required label="流程名称">
      <el-input v-model="defFlow.flowName" placeholder="请设置流程名" />
    </el-form-item>
    <el-form-item prop="flowKey" required label="流程Key">
      <el-input
        v-model="defFlow.flowKey"
        placeholder="请设置流程Key"
        :disabled="disabledFlowKey"
      />
    </el-form-item>
    <el-form-item prop="groupId" required label="流程分组">
      <DictSelect
        v-model:defaultValue="defFlow.groupId"
        dict-code="flow-group"
        :width="300"
        placeholder="请选择流程分组"
        show-all="N"
      />
    </el-form-item>
    <el-form-item prop="formId" label="流程表单">
      <el-input v-model="defFlow.formName" placeholder="请设置流程表单">
        <template #append>
          <el-button icon="search" @click="handleOpenFormPicker" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="status" required label="流程状态">
      <el-radio-group v-model="defFlow.status" disabled>
        <el-radio value="-1" label="暂存"></el-radio>
        <el-radio value="0" label="作废"></el-radio>
        <el-radio value="1" label="发布"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="translate('flow.def.sort')" prop="sort">
      <el-input-number
        v-model="defFlow.sort"
        :min="1"
        :max="1000"
        :placeholder="translate('flow.def.sort')"
      />
    </el-form-item>
    <el-form-item label="备注说明">
      <el-input
        v-model="defFlow.remark"
        show-word-limit
        maxlength="128"
        :rows="3"
        type="textarea"
        placeholder="流程备注说明信息"
      />
    </el-form-item>
  </el-form>
  <FormPicker ref="formPickerRef" @change="handleFormChange" />
</template>
